<template>
  <div class="purchase_view">
    <!-- 添加或修改申请采购明细对话框 -->
    <el-dialog :title="title" center :visible.sync="open" width="1000px" append-to-body>
      <el-tabs v-model="activeName">
        <el-tab-pane label="流程表单" name="first"></el-tab-pane>
        <el-tab-pane label="流程签批" name="second">
          <TaskApproval ref="task" @refresh="reload" :instanceId="form.instanceId"></TaskApproval>
        </el-tab-pane>
      </el-tabs>

      <el-form ref="form" :model="form"  label-width="80px" v-if="activeName=='first'">
        <el-form-item style="margin-top: 0" label="流程创建" prop="createUserId">
          <span style="color: #0000ee">{{form.createTime}} {{form.createBy}}创建</span>
        </el-form-item>
        <el-form-item label="流程名称" prop="flowName">
          {{form.flowName}}
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="调课类型" prop="type">
              {{type}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="课程信息" v-if="form.course1.courseId">
          <el-row>
            <el-col :span="12">
              <el-form-item label="学院" prop="collegeOrgId">
                {{course1ColleageName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="实验室" prop="course1.labId">
                {{lab1}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开课地点" prop="course1.classRoomId">
                {{form.course1.classRoomId}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专业">
                {{course1MajorOpt}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="课程编码">
                {{form.course1.courseNo}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课程名称">
                {{form.course1.courseName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="实验项目">
                {{form.course1.experimentalProject}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实验学时">
                {{form.course1.experimentalHours}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="班级">
                {{form.course1.classNo}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="人数">
                {{form.course1.personNum}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="每组人数">
                {{form.course1.personsOfGroup}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="周次">
                {{form.course1.weekOpenNums}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="周一">
                {{form.course1.day1}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="周二">
                  {{form.course1.day2}}
                </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="周三">
                {{form.course1.day3}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="周四">
                  {{form.course1.day4}}
                </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="周五">
                {{form.course1.day5}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="周六">
                  {{form.course1.day6}}
                </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="周日">
                {{form.course1.day7}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-for="(teacher, index) in form.course1.courseTeacherList" :key="index">
            <el-col :span="12">
              <el-form-item label="老师工号">
                <el-input size="small" v-model="teacher.teacherNo" disabled placeholder="请输老师工号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="老师姓名">
                <el-input size="small" v-model="teacher.teacherName" disabled placeholder="请输老师姓名" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="目标课程" v-if="form.type == 2 && form.course2.courseId">
          <el-row>
            <el-col :span="12">
              <el-form-item label="学院">
                {{course2ColleageName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="实验室" prop="course2.labId">
                {{lab2}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开课地点" prop="course2.classRoomId">
                  {{form.course2.classRoomId}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专业">
                {{course2MajorOpt}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="课程编码">
                {{form.course2.courseNo}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课程名称">
                {{form.course2.courseName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="实验项目">
                {{form.course2.experimentalProject}}

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实验学时">
                {{form.course2.experimentalHours}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="班级">
                {{form.course2.classNo}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="人数">
                {{form.course2.personNum}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="每组人数">
                {{form.course2.personsOfGroup}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="周次">
                  {{form.course2.weekOpenNums}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="周一">
                {{form.course2.day1}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="周二">
                  {{form.course2.day2}}
                </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="周三">
                {{form.course2.day3}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="周四">
                  {{form.course2.day4}}
                </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="周五">
                {{form.course2.day5}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="周六">
                  {{form.course2.day6}}
                </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="周日">
                {{form.course2.day7}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-for="(teacher, index) in form.course2.courseTeacherList" :key="index">
            <el-col :span="12">
              <el-form-item label="老师工号">
                <el-input size="small" v-model="teacher.teacherNo" disabled placeholder="请输老师工号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="老师姓名">
                <el-input size="small" v-model="teacher.teacherName" disabled placeholder="请输老师姓名" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <SelectCourse @setCourse1="setCourse1" @setCourse2="setCourse2" ref="selectCourse"></SelectCourse>

      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm" v-if="activeName=='first'">保存</el-button>
        <el-button type="primary" @click="submitWorkflow" v-if="activeName=='second'">提交</el-button> -->
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ChooseUser from "@/views/labsafety/safetyCompents/check_user.vue"
import { getCheckedList } from "@/api/labdata/employee"
import TaskApproval from '@/views/labdata/flowTask/task_approval.vue'
import { formatCurrentDate } from "@/utils/index"
import { getOrgByFunctionOpt, listSecondOrgLab } from "@/api/labdata/orgnization"
import { getCourse } from "@/api/course/course"
import { getAdjust, addAdjust, updateAdjust, submitAdjust } from "@/api/course/adjust"
import SelectCourse from '@/views/course/course/select_course.vue'

export default {
  components: {
    ChooseUser, SelectCourse, TaskApproval
  },
  name: "CourseAdjustView",
  data() {
    return {
      adjustTypeList: [
        {
          label: '现有课程调整',
          value: 1
        },
        {
          label: '交换课程调整',
          value: 2
        }
      ],
      copyToUsers: [],
      activeName: 'first',
      // 遮罩层
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      showCopy: false,
      //二级机构
      collegeList: [],
      //二级机构下的实验室
      lab1List: [],
      lab2List: [],
      weekDayOptOptions: [],
      majorOptOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        instanceId: null,
      },
      // 表单参数
      form: {
        type: 1,
        course1: {},
        course2: {}
      },
      // 表单校验
      rules: {
        flowName: { required: true, message: "流程名称不能为空", trigger: "blur" },
        type: { required: true, message: "调课类型不能为空", trigger: "blur" }
      }
    };
  },
  created() {
    // 学院
    this.getCollegeList()
    // 星期
    this.getDicts("weekDayOpt").then(response => {
        this.weekDayOptOptions = response.data;
    });
    this.getDicts("majorOpt").then(response => {
        this.majorOptOptions = response.data;
    })
  },
  computed: {
    course1MajorOpt() {
      if (this.form.course1.majorOpt) {
        const dict = this.majorOptOptions.find(item => item.dictValue == this.form.course1.majorOpt)
        return dict.dictLabel
      }
      return ''
    },
    course2MajorOpt() {
      if (this.form.course2.majorOpt) {
        const dict = this.majorOptOptions.find(item => item.dictValue == this.form.course2.majorOpt)
        return dict.dictLabel
      }
      return ''
    },
    type() {
        const obj = this.adjustTypeList.find(item => item.value == this.form.type)
        if (obj) {
          return obj.label
        }
        return ''
    },
    lab1() {
        const obj = this.lab1List.find(item => item.orgId == this.form.course1.labId)
        if (obj) {
          return obj.orgName
        }
        return ''
    },
    lab2() {
        const obj = this.lab2List.find(item => item.orgId == this.form.course2.labId)
        if (obj) {
          return obj.orgName
        }
        return ''
    },
    weekDayOpt1 () {
        const obj = this.weekDayOptOptions.find(item => item.dictValue == this.form.course1.weekDayOpt)
        if (obj) {
          return obj.dictLabel
        }
        return ''
    },
    weekDayOpt2 () {
        const obj = this.weekDayOptOptions.find(item => item.dictValue == this.form.course2.weekDayOpt)
        if (obj) {
          return obj.dictLabel
        }
        return ''
    },
    selectCopyToUsers() {
      return this.copyToUsers.map(item => item.nickName)
    },
    course1ColleageName() {
      if (this.form.course1.collegeOrgId) {
        const college = this.collegeList.find(item => item.orgId == this.form.course1.collegeOrgId)
        return college.orgName
      }
      return ''
    },
    course2ColleageName() {
      if (this.form.course2.collegeOrgId) {
        const college = this.collegeList.find(item => item.orgId == this.form.course2.collegeOrgId)
        return college.orgName
      }
      return ''
    }
  },
  methods: {
    reload(){
      this.$emit("refresh");
      this.$forceUpdate();
    },
    getCollegeList(){
      getOrgByFunctionOpt(2).then(response => {
        this.collegeList = response.data
      });
    },
    getLabList1(id) {
      listSecondOrgLab(id).then(response => {
        this.lab1List = response.data
      });
    },
    getLabList2(id) {
      listSecondOrgLab(id).then(response => {
        this.lab2List = response.data
      });
    },
    setWorkflow(workflowId){
      this.form.workflowId = workflowId;
    },
    submitWorkflow(){
		if(!this.form.workflowId){
		  this.form.workflowId = this.$refs["workFlow"].getWorkflowId();
		}
        submitAdjust(this.form).then(response => {
          this.msgSuccess("修改成功");
          this.open = false;
          this.$emit("refresh");
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        type: 1,
        course1: {},
        course2: {}
      };
      this.copyToUsers = []
      this.lab1List = []
      this.lab2List = []
      this.resetForm("form");
      this.showCopy = false
      this.activeName = 'first';
    },
    /** 新增按钮操作 */
    handleAdd(id) {
      this.reset();
      this.form.createTime  = formatCurrentDate()
      const currentUsername = this.$store.state.user.name
      this.form.createBy = currentUsername
      this.form.type = 1
      this.open = true;
      this.title = "调课表单";
      if (id) {
        getCourse(id).then(response => {
          this.form.course1 = response.data;
          this.getLabList1(this.form.course1.collegeOrgId)
          if (this.form.type == 2) {
            this.getLabList2(this.form.course2.collegeOrgId)
          }
        })
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.open = true;
      const instanceId = row.instanceId
      getAdjust(instanceId).then(response => {
        this.form = response.data;
        this.getLabList1(this.form.course1.collegeOrgId)
        if (this.form.type == 2) {
          this.getLabList2(this.form.course2.collegeOrgId)
        }
        if(this.form.copyToUsers){
          getCheckedList({checkedUserIds:this.form.copyToUsers}).then(res=>{
            this.setCopyToUsers(res.data)
            this.showCopy = true
          });
        }
        this.title = "调课备案";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          debugger
          if (this.form.type == 1 && !this.form.course1.courseId) {
              this.msgError("调整课程不能为空");
              return
          }
          if (this.form.type == 2 && !this.form.course2.courseId) {
              this.msgError("目标课程不能为空");
              return
          }
          if (this.form.instanceId != null) {
            updateAdjust(this.form).then(response => {
              this.msgSuccess("修改成功");
            });
          } else {
            addAdjust(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.form = response.data;
            });
          }
          this.$emit("refresh")
        }
      });
    },
    refreshChoose() {
      this.$forceUpdate();
    },
    setCopyToUsers(list) {	// 抄送人员
      this.copyToUsers = list
      this.form.copyToUsers = ''
      list.forEach((item, index) => {
        if (index > 0) {
          this.form.copyToUsers += ','
        }
        this.form.copyToUsers += item.userId
      });
    },
    selectCourse1() {
      this.$refs['selectCourse'].handleShow(1)
    },
    selectCourse2() {
      this.$refs['selectCourse'].handleShow(2)
    },
    setCourse1(courseId) {
      getCourse(courseId).then(response => {
        this.form.course1 = response.data
        this.getLabList1(this.form.course1.collegeOrgId)
      })
    },
    setCourse2(courseId) {
      getCourse(courseId).then(response => {
        this.form.course2 = response.data
        this.getLabList2(this.form.course2.collegeOrgId)
      })
    }
  }
};
</script>

<style scoped lang="scss">
.el-button.active{
    text-decoration: underline;
    color: #0000ee;
  }
  .el-button.dis_active {
    color: #999999
  }
  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: left;
    justify-content: left;
  }
  .input_w{
    //width: 100%;
  }
 /deep/ .el-form-item {
    margin-bottom: 5px;
  }
</style>
